<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-toolbar/core-toolbar.html">
<link rel="import" href="/components/core-header-panel/core-header-panel.html">
<link rel="import" href="/components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="/components/core-scaffold/core-scaffold.html">
<link rel="import" href="/components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="/components/core-pages/core-pages.html">
<link rel="import" href="/components/core-item/core-item.html">
<link rel="import" href="../utility/ajax-service.html">
<link rel="import" href="nav-tree.html">
<link rel="import" href="nav-drawer-panel.html">


<polymer-element name="nav-panel" attributes="mode">

    <template>
        <style>
            :host {
                display: block;
            }

            #navheader {
                background-color: #1685a9;
            }

            #navheader a {
                text-decoration: none;
            }

            #navheader a:link {
                color: black;
            }

            #navheader a:visited {
                color: black;
            }

            #navheader a:hover {
                color: blueviolet;
            }

            #navheader a:active {
                color: black;
            }

            [drawer] {
                background-color: #f0f0f4;
                border-right: 1px solid #ccc;
            }

            [main] {
                height: 100%;
                background-color: #fffbf0;
            }

            #logout {
                font-size: 18px;
                position: absolute;
                right: 15px;
                top: 10px;
                cursor: pointer;
            }
        </style>

        <nav-drawer-panel id="drawerPanel">
            <!--
            <div vertical layout drawer>
              <content select="[navigation]"></content>
            </div>
            -->
            <core-header-panel drawer flex mode="seamed">
                <core-toolbar id="navheader">
                    <a href="/admin">{{menu_title}}</a>
                </core-toolbar>
                <nav-tree></nav-tree>
            </core-header-panel>
            <core-header-panel main mode="{{mode}}">
                <core-toolbar id="navheader">
                    <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
                    <content select="[tool]"></content>
                    <core-item id="logout" label="Logout" icon="exit-to-app" on-click="{{logout}}"></core-item>
                    <ajax-service id="ajax" url="/admin/session" on-core-response="{{logoutResponse}}" handleAs="json" method="delete"></ajax-service>
                </core-toolbar>
                <content select="*"></content>
            </core-header-panel>
        </nav-drawer-panel>
    </template>

    <script>

        Polymer('nav-panel', {
            menu_title: "Home",
            mode: "seamed",
            togglePanel: function () {
                this.$.drawerPanel.togglePanel();
            },
            logout: function () {
                this.$.ajax.go();
            },
            logoutResponse: function(){
              location.href = '/admin/login';
            }
        });
    </script>
</polymer-element>
